<template>
    <div class="addGoods-container">
        <b-container class="bv-example-row row-box">
            <!-- 步骤条 -->
            <Steps :current="current">
                <Step title="商品信息" icon="ios-information-circle"></Step>
                <Step title="商品图片" icon="md-images"></Step>
                <Step title="发布商品" icon="ios-send"></Step>
            </Steps>
            <!-- 商品信息表单区域 -->
            <b-row align-h="center" class="my-goodsInfo">
                <b-col cols="12" sm="12" md="6" lg="6">
                    <div class="goodInfo">
                        <div class="tip-info">
                            <h5>为商品添加图片</h5>
                            <p><Icon type="md-bulb" /> tips：最多上传4张图片哦</p>
                        </div>
                        <ImgCutter v-on:cutDown="cutDown"></ImgCutter>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>

// eslint-disable-next-line import/no-extraneous-dependencies
import ImgCutter from 'vue-img-cutter'

export default {
    name: 'addGoodImgs',
    data() {
        return {
            current: 2,
            gId: this.$route.params.gId,
        }
    },
    methods: {
        // handleChange({ fileList }) {
        //     this.fileList = fileList.slice(-4)
        //     console.log(this.fileList)
        //     this.fileList.forEach(file => {
        //         formData.append('files', file)
        //     })
        // },
        // 上传图片
        // handleUpload() {
        //     formData.append('gpGid', this.gId)
        //     this.uploading = true
        //     console.log(this.fileList)
        //     this.$axios({
        //         url: 'goodsPicture/save',
        //         method: 'post',
        //         data: formData,
        //         processData: false,
        //         contentType: false,
        //         headers: {
        //             Authorization: localStorage.getItem('token'),
        //         },
        //     }).then(res => {
        //         console.log(res.data)
        //     })
        // },
    },
    components: {
        ImgCutter,
    },
}
</script>
<style scoped>
.row-box{
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
}
.my-goodsInfo {
    margin-top: 20px;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
.goodInfo {
    min-height: 440px;
}
.tip-info {
    margin-bottom: 20px;
}
.btn-info {
    margin-top: 20px;
}
</style>
